<template>
  <section class="logo-header-dark section-header">
    <img class="nav-logo" src="../../../assets/front/img/logo_main.png" @click="$router.push('/f')">
    <div class="welcome">
      {{title}}
    </div>
    <slot name="nav">
      <div class="help-nav-list">
        <!-- eslint-disable-next-line -->
        <div v-for="(item,index) in navList" :key="index" class="help-nav-item"
             :class="{active:index===activeIndex}" @click="handleNav(index)">
          {{item}}
        </div>
      </div>
    </slot>

  </section>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        activeIndex: {
            type: Number,
            default: 0
        },
        navList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
        };
    },
    methods: {
        handleNav(index) {
            this.$emit('clickNav', index);
        }
    }
};
</script>

<style lang="scss" scoped>
  @import "../../../assets/front/front";
  .logo-header-dark {
      padding: 0 5px;
      height: 85px;
      display: flex;
      align-items: center;
      background: $main-color;
      .welcome {
        margin-left: 10px;
        padding: 0 15px;
        height: 60px;
        @include flex-center;
        font-size: 24px;
        color: #fff;
        border-left: $border;
      }
      .help-nav-list {
        flex-grow: 1;
        height: 100%;
        @include flex-align-center;
        justify-content: flex-end;
        .help-nav-item {
          padding: 0 20px;
          height: 100%;
          color: #fff;
          cursor: pointer;
          @include flex-center;
          &.active, &:hover {
            background-color: #16ab58;
          }
        }
      }
    }
</style>
